<template>
  <div>
    <el-empty v-if="!action.properties || action.properties.length <= 0" description="暂无属性" :image-size="20">
      <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary" @click="handleAddProperty">立即添加属性</el-button>
    </el-empty>
    <property
      v-if="action.properties && action.properties.length > 0"
      :value="item"
      :key="index"
      v-for="(item, index) in action.properties"
      :elements="elements"
      v-on:handle-delete-property="handleDeleteProperty"
    ></property>

    <div v-if="action.properties && action.properties.length > 0" class="d2-fr d2-pb-10">
      <el-button plain type="primary" size="mini" icon="el-icon-circle-plus-outline"  @click="handleAddProperty">添加属性</el-button>
    </div>
  </div>
</template>

<script>
import Property from '../property'
import uuid from 'uuid'

export default {
  name: 'static-event',
  components: { Property },
  props: {
    value: Object,
    elements: Array
  },
  data() {
    return {
      action: this.value
    }
  },
  methods: {
    handleAddProperty(){
      this.action.properties.push({
        id: uuid()
      })
    },
    handleDeleteProperty(id){
      const index = this.action.properties.findIndex((item) => item.id === id);
      if(index > -1){
        this.action.properties.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>

</style>
